Page({
  data: {
    schema:[
    ],
    formData:{
    },
    title: '',
    result: '',
    remark: '',
    apiName: '',
    editorCtx: null,
    htmlContent: '',
    formats: {},
    isEditorReady: false,
    selection: { start: 0, end: 0 }, // 记录当前选区
    hasSelection: false, // 是否有选中内容
    floatMenuStyle: '' // 悬浮菜单样式（定位用）
  },

  onLoad(options) {
    wx.setNavigationBarTitle({
      title: options.title,
    })
    
    this.setData({
      title: options.title,
      zh:options.zh,
      remark: options.remark,
      webUrl: options.webUrl
    })
  },
  /**
   * 编辑器组件就绪时触发
   * 这是获取EditorContext最可靠的时机
   */
  onEditorReady() {
    const that = this
    // 创建选择器查询
    wx.createSelectorQuery().select('#editor')
      .context(function(res) {
        // 存储编辑器上下文
        that.setData({
          editorCtx: res.context,
          editorReady: true  // 标记编辑器已就绪
        })
        console.log('编辑器初始化完成')
      })
      .exec()  // 执行查询
  },
   // 让编辑器失去焦点
   blurEditor(e) {
    if (!this.data.editorReady) {
      wx.showToast({
        title: '编辑器未就绪',
        icon: 'none'
      })
      return
    }
    // 调用blur方法
    this.data.editorCtx.blur({
      success: (res) => {
        wx.showToast({
          title: '已关闭编辑',
          icon: 'success',
          duration: 1000
        })
      this.setData({
        result: res,
        apiName: e.currentTarget.dataset.apiname
      })
      },
      fail: (err) => {
        console.error('失焦失败', err)
        wx.showToast({
          title: '操作失败',
          icon: 'none'
        })
        this.setData({
          result: `失焦失败: ${err}`,
          apiName: e.currentTarget.dataset.apiname
        })
      },
      complete: () => {
        // 无论成功失败都会执行
        console.log('blur操作完成')
      }
    })
  },
   // 清空编辑器内容
   clearEditor(e) {
    if (!this.data.editorReady) {
      wx.showToast({
        title: '编辑器未就绪',
        icon: 'none'
      })
      return
    }
    this.data.editorCtx.clear({
      success: (res) => {
        console.log('清空内容成功')
        this.setData({
          htmlContent: '' // 同步清空预览内容
        })
        wx.showToast({
          title: '已清空内容',
          icon: 'success',
          duration: 1500
        })
        this.setData({
          result: res,
          apiName: e.currentTarget.dataset.apiname
        })
      },
      fail: (err) => {
        console.error('清空内容失败', err)
        wx.showToast({
          title: '清空失败',
          icon: 'none'
        })
        this.setData({
          result: `清空内容失败: ${err}`,
          apiName: e.currentTarget.dataset.apiname
        })
      }
    })
  },
  // 删除选中文本
  deleteSelectedText(e) {
    this.data.editorCtx.getSelection({
      success: res => {
        console.log(res.range)
        this.data.editorCtx.deleteText({
          index:res.range.index,
          length: res.range.length,
          success: res1 => {  
        console.log('删除选中文本成功')
        this.setData({
          result: res1,
          apiName: e.currentTarget.dataset.apiname
        })
      },
      fail: (err) => {
        console.error('删除失败', err)
        this.setData({
          result: `删除失败: ${err}`,
          apiName: e.currentTarget.dataset.apiname
        })
      }
        })
      }
    })
  },
  // 格式化文本
  format(e) {
    const { name, value } = e.currentTarget.dataset
    this.data.editorCtx.format(name, value)
  },
// 修改样式
format1(e) {
  const { name, value } = e.currentTarget.dataset
  this.data.editorCtx.format(name, value)
  this.setData({
    result: `name: ${name} value: ${value}`,
    apiName: e.currentTarget.dataset.apiname
  })
},
  // 插入图片
  insertImage(e) {
    const that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePath = res.tempFilePaths[0]
        that.data.editorCtx.insertImage({
          src: tempFilePath,
          alt: '图片',
          success(res) {
            that.setData({
              result: res,
              apiName: e.currentTarget.dataset.apiname
            })
            console.log('插入图片成功')
          }
        })
      }
    })
  },
  // 获取富文本内容
  getContent(e) {
    this.data.editorCtx.getContents({
      success: res => {
        console.log('获取内容成功', res)
        this.setData({
          htmlContent: res.html
        })
        wx.showToast({
          title: '已获取内容',
          icon: 'success',
          duration: 1500
        })
        this.setData({
          result: res,
          apiName: e.currentTarget.dataset.apiname
        })
      }
    })
  },
  // 获取选中文本的位置信息
  getSelectionBounds(e) {
    this.data.editorCtx.getSelection({
      success: res => {
        console.log(res.range)
    this.data.editorCtx.getBounds({
      index:res.range.index,
      length:res.range.length,
      success: (res) => {
        console.log('选中文本位置信息：', res.bounds)
        this.setData({
          result: res.bounds,
          apiName: e.currentTarget.dataset.apiname
        })
        if (res.bounds.length > 0) {
          // 取第一个矩形区域作为菜单定位基准
          const firstBound = res.bounds[0]
          // 计算悬浮菜单位置（在选中文本上方）
          this.setData({
            floatMenuStyle: `
              display: block;
              position: absolute;
              top: ${firstBound.top - 40}px;  // 菜单高度约40px
              left: ${firstBound.left}px;
              z-index: 100;
            `
          })
        }
      },
      fail: (err) => {
        console.error('获取位置信息失败：', err)
      }
    })
  }
})
  },
  getHistoryState(e){
    this.data.editorCtx.getHistoryState({
      success: res => {
        console.log('获取历史状态成功', res)
        wx.showToast({
          title: '已获取内容',
          icon: 'success',
          duration: 1500
        })
        this.setData({
          result: res,
          apiName: e.currentTarget.dataset.apiname
        })
      }
    })
  },
  //获取当前选取
  getSelection(e){
    this.data.editorCtx.getSelection({
      success: res => {
        console.log('获取当前选取', res)
        wx.showToast({
          title: '已获取选区内容',
          icon: 'success',
          duration: 1500
        })
        this.setData({
          result: res,
          apiName: e.currentTarget.dataset.apiname
        })
      }
    })
  },
   //获取编辑器已选区域内的纯文本内容
   getSelectionText(e){
    this.data.editorCtx.getSelectionText({
      success: res => {
        console.log('获取编辑器已选区域内的纯文本内容', res)
        wx.showToast({
          title: '已获取选区内容',
          icon: 'success',
          duration: 1500
        })
        this.setData({
          result: res,
          apiName: e.currentTarget.dataset.apiname
        })
      }
    })
  },
  //插入自定义区块
  insertCustomBlock(e) {
    const customBlockList = []
    // 定义自定义块的HTML结构（支持内联样式）
    const customHtml = `
      <div style="padding: 15px; background-color: #fff8e6; border-left: 4px solid #ffc107; margin: 10px 0;">
        <h3 style="margin: 0 0 8px 0; color: #e6a23c; font-size: 16px;">提示信息</h3>
        <p style="margin: 0; color: #666; font-size: 14px;">这是一个自定义提示卡片，可包含重要说明内容。</p>
      </div>
    `
    this.data.editorCtx.insertCustomBlock({
      html: customHtml,
      success: (res) => {
        console.log("插入自定义区块成功",res)
        customBlockList.push({
          blockId: res.blockId
        })
        wx.showToast({
          title: '已插入提示卡片',
          icon: 'none'
        })
        console.log(customBlockList)
        this.setData({
          result: res,
          apiName: e.currentTarget.dataset.apiname,
          customBlockList:customBlockList
        })
      },
      fail: (err) => {
        console.error('插入失败:', err)
        wx.showToast({
          title: '插入失败',
          icon: 'none'
        })
      }
    })
  },
   //插入分割线
   insertDivider(e){
    this.data.editorCtx.insertDivider({
      success: res => {
        console.log('插入分割线', res)
        wx.showToast({
          title: '插入成功',
          icon: 'success',
          duration: 1500
        })
        this.setData({
          result: res,
          apiName: e.currentTarget.dataset.apiname
        })
      }
    })
  },
  // 插入日期时间
  insertDateTime(e) {
    const now = new Date()
    const dateText = `[${now.toLocaleString()}]` // 格式化时间
    this.data.editorCtx.insertText({ 
      text: dateText,
      success: res => {
        console.log('插入时间文本成功', res)
        wx.showToast({
          title: '插入成功',
          icon: 'success',
          duration: 1500
        })
        this.setData({
          result: res,
          apiName: e.currentTarget.dataset.apiname
        })
      }
     })
  },
  //恢复
  redo(e){
    this.data.editorCtx.redo({
      success: res => {
        console.log('恢复成功', res)
        wx.showToast({
          title: '恢复成功',
          icon: 'success',
          duration: 1500
        })
        this.setData({
          result: res,
          apiName: e.currentTarget.dataset.apiname
        })
      }
    })
  },
   //清除当前选区的样式
   removeFormat(e){
    this.data.editorCtx.removeFormat({
      success: res => {
        console.log('清除成功', res)
        wx.showToast({
          title: '清除成功',
          icon: 'success',
          duration: 1500
        })
        this.setData({
          result: res,
          apiName: e.currentTarget.dataset.apiname
        })
      }
    })
  },
  // 使得编辑器光标处滚动到窗口可视区域内
  scrollIntoView(e) {
    // 先获取文本总长度
    this.data.editorCtx.getContents({
    success: (res) => {
      const textLength = res.text.length
      // 计算有效范围（如滚动到最后10个字符）
      const start = Math.max(0, textLength - 10)
      const end = Math.min(textLength, start + 5)
      this.data.editorCtx.scrollIntoView()
      this.setData({
        result: {"errMsg":"ok"},
        apiName: e.currentTarget.dataset.apiname
      })
    }
  })
    // // 先获取当前选区
    // this.data.editorCtx.getSelection({
    //   success: (res) => {
    //     console.log(res.range)
    //     this.data.editorCtx.scrollIntoView({
    //       index: res.range.index,
    //       length: res.range.length,
    //       success: (res1) => {
    //         console.log('已滚动到选中文本',res1)
    //         this.setData({
    //           result: '已滚动到选中文本',
    //           apiName: e.currentTarget.dataset.apiname
    //         })
    //       }
    //     })
    //   }
    // })
  },
  // 初始化编辑器内容
  setContents(e) {
    // 模拟请求远程模板
    wx.showLoading({ title: '加载模板中...' })
    setTimeout(() => {
      const remoteHtml = `
        <h3 style="color: #333;">远程模板标题</h3>
        <p>这是从服务器加载的模板内容</p>
        <ul>
          <li>列表项1</li>
          <li>列表项2</li>
        </ul>
      `
      this.data.editorCtx.setContents({
        html: remoteHtml,
        success: (res) => {
          wx.hideLoading()
          wx.showToast({ title: '模板加载成功', icon: 'none' })
          console.log(res)
        this.setData({
          result: res,
          apiName: e.currentTarget.dataset.apiname
        })
        },
        fail: () => {
          wx.hideLoading()
        }
      })
    }, 1000)
  },
   //设置当前选区
   setSelection(e){
    this.data.editorCtx.setSelection({
      start: 0,
      end: 10,
      success: (res) => {
        wx.showToast({ title: '已全选内容', icon: 'none' })
        this.setData({
          result: res,
          apiName: e.currentTarget.dataset.apiname
        })
      }
    })
  },
  //撤销
  undo(e){
    this.data.editorCtx.undo({
      success: res => {
        console.log('撤销成功', res)
        wx.showToast({
          title: '撤销成功',
          icon: 'success',
          duration: 1500
        })
        this.setData({
          result: res,
          apiName: e.currentTarget.dataset.apiname
        })
      }
    })
  },
  // 监听编辑器状态变化
  onStatusChange(e) {
    const formats = e.detail
    this.setData({ formats })
  }
})
